<template>
	<view class="flex-col page" :style="{paddingTop: safeArea_top + 'px'}">
		<view>
			<image :src="list3[0]" style="width: 100vw;" mode="widthFix"></image>
		</view>
		<view class="flex-col section_3">
			<view class="flex-row section_4" v-show="tipsValue">
				<image src="../../static/images/detail-tips.png" class="image_4" />
				<text class="text_1">{{tipsValue}}</text>
			</view>
			<u-scroll-list class="justify-center horiz-list" :indicator="false">
				<view class="flex-col horiz-list-item" :key="i" v-for="(item, i) in productlList"
					@click="onClickItem(i)" :class="{'active':isActive==i}">
					<text class="text_2">{{ item.name }}</text>
					<view class="flex-row group">
						<text class="text_3 prcie">{{ item.price }}</text>
						<text class="text_4">元/{{item.duration}}分钟</text>
					</view>
				</view>
			</u-scroll-list>
		</view>

		
		<u-skeleton class="flex-col section_8" rows="3" :loading="loading" :title="false" titleWidth='100%'
			v-show="loading" rowsHeight='26'></u-skeleton>

		<view class="content" v-show="!loading">
			<view class="flex-col section_8">
				<view class="flex-row">
					<text class="text_19" :class="{'active':isTabActive==1}" @click="onClickTab(1)">项目介绍
						<image v-show="isTabActive==1" src="../../static/images/isTabActive.png" class="image_11" />
					</text>
					<text class="text_19" :class="{'active':isTabActive==2}" @click="onClickTab(2)">下单须知
						<image v-show="isTabActive==2" src="../../static/images/isTabActive.png" class="image_11" />
					</text>
					<text class="text_19" :class="{'active':isTabActive==3}" @click="onClickTab(3)">禁忌说明
						<image v-show="isTabActive==3" src="../../static/images/isTabActive.png" class="image_11" />
					</text>
					
				</view>
				<rich-text :nodes="content" v-if="isTabActive==1"></rich-text>
				<view v-if="isTabActive==2" class="intro">
貂蝉到家为订单服务信息提供方，对您与商家之间因订单服务产生纠纷会全力协助配解决，若您私下交易，由此您与商家之间产生的一切纠纷与本平台无关。
1.貂蝉到家所提供的服务属于舒缓保健类型，不具备医疗性质，如需治疗还请前往正规医院就诊。
2.貂蝉到家提供的是专业正规的推拿按摩服务，对于不正当的行为和要求，技师有权拒绝，保留诉讼的权利。
3.顾客下单后，理疗师会按订单预约时间及服务地址等信息前往，请留意订单动态并保持电话畅通。
4.顾客下单后，因自身原因取消订单，理疗师还未出发，扣除10元空单费。
5.顾客下单后，理疗师与客户联系确定了服务时间、服务地址，理疗师按了出发，客户要取消订单的，平台将扣除交通费及10元空单费。
6.理疗师到达服务地址后，客户因看见理疗师不够漂亮等与专业无关系列因素而要求退单者，平台将扣除50%的项目费用及交通费。
7.理疗师到达服务地址后，若联系不上客户，理疗师会等待15分钟;如15分钟后仍无法联系上，理疗师则会自行离开，并且该笔订单会自动取消，平台将扣除50%的项目费用及交通费。
8.服务开始后，因顾客原因提前终止服务的，服务费及交通费将不予退还。
9.您在接受相应服务后向商家提出退款要求的，非因商家服务质量存在严重瑕疵，商家不提供退款服务。
10.订单支付后，如需退款，请在点击 我的-&gt;联系客服，发送订单截图给客服并申请退款。

【隐私保护】
请您注意，我们非常重视号码隐私保护，对商家隐藏您的真实手机号，保护您的隐私安全。通信过程，商家的app等设备终端，不会暴露您的真实手机号。我们通过设置虚拟号码（中间号码）等措施来保障您的号码隐私。
1.使用隐私号码保护订单，在接听和拨打电话的通话过程中都可能会被录音，在发送和接收短信的通信过程中都可能会被存储相关内容。
2.经您授权，当用户、商家间出现服务纠纷时，平台可调取并使用录音信息、短信内容作为解决纠纷的参考依据;另为预防风险保护各方安全，系统可能会对隐私号录音、短信内容进行技术分析。
3.平台将切实保障通信双方的隐私安全，录音、短信将上传至貂蝉到家服务器保存，各方无法自行下载、调取；除下述规定的情况外（A.事先获取您明确的同意或授权；B.为履行法定义务所必需:根据法律法规的规定、诉讼争议解决需要，或行政、司法等有权机关依法提出的要求；C.在我们需要接受来自其他主体的尽职调查时，我们会把您的信息提供给必要的主体，但我们会通过和这些主体签署保密协议等方式要求其对您的个人信息采取保密措施。)平台不会将录音、短信提供给任何人。
4.录音、短信内容保存期限按照法律法规所规定的保存期限及为实现个人信息处理目的所必需的期限内存储您的个人信息。
5.受网络状态稳定性等限制，极端情况下，可能会出现无法录音或部分录音无法听清等录音失败，无法存储或部分短信内容无法解析等储存失败情形。如遇此类情形，平台无需承担责任。
				</view>
				<view v-if="isTabActive==3" class="intro">
1.饭后半小时不宜进行按摩
2.妇女经期或妊娠期不宜做腹部、腰骶部按摩
3.骨折复位、开放性骨折，人体内有金属固定物禁用
4.感染性疾病、如骨核、骨髓炎禁用
5.皮肤病、皮肤破损者（如疱疹、瘟疹、脓肿蜂窝组织炎、烧伤、烫伤者）禁用
6.需要外科手术者禁用
7.其他严重疾病或诊断不明的较严重疾病禁用
8.眼部疾病患病期、近期做过眼部手术或做过填充的禁用
				</view>
			</view>



		
		</view>
		<view class="flex-col group_14">
			<view class="section_13"> </view>
			<view class="flex-row section_14">
				<view class="flex-col items-center group_15" @click="onCollection()" v-if="false">
				
					<u-icon size="28" :name="name" :color="name === 'heart-fill' ? 'rgb(243, 151, 53)':''"></u-icon>
					<text>收藏</text>
				</view>
				<view class="flex-col group_16" @click="onConfirm()">
					<view class="flex-col items-center button">
						<text v-if="type==0">下单选择技师</text>
						<text v-if="type==1">立即下单</text>
					</view>
				</view>
			</view>
		</view>

		<coupon ref="coupon" :couponList="coupon"></coupon>
	</view>
</template>

<script>
	// import tmBottomnavigation from '@/tm-vuetify/components/tm-bottomnavigation/tm-bottomnavigation.vue'
	// import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue'
	import coupon from "./components/coupon.vue"
	export default {
		components: {
			// tmBottomnavigation,
			// tmSkeleton,
			coupon
		},
		data() {
			return {
				loading: true,
				productlList: [],
				isActive: 0,
				isTabActive: 1,
				list3: [],
				content: '',
				showHeight: 200,
				tagStyle: {
					p: 'color: #606266; line-height: 24px;'
				},
				shadowStyle: {
					position: 'relative',
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "100px",
					marginTop: "-100px",
				},
				tipsValue: '',
				id: null,
				praise: 0,
				isVip: 0,
				is_vip: false,
				vip_discount: 0,
				comment_count: 0,
				comment: [],
				comment_index: 0,
				list: [],
				total: null,
				page: 1,
				name: "heart",
				coupon: [],
				type: 0,
				technician_id: 0,
				notice:'',
				is_ios:1,
				safeArea_top: 0
			};
		},
		onLoad(options) {
			console.log('onload');
			// #ifdef APP-PLUS
			const safeArea = uni.getStorageSync('safeArea')
			this.safeArea_top = safeArea.top
			console.log('safeArea', safeArea);
			// #endif
			this.id = options.id;
			if (options.type) {
				this.type = options.type;
				this.technician_id = options.technician_id
			}
		},
		onShow() {
			uni.$u.sleep(500).then(() => {
				this.init();
			})
			this.$http.post('api/index/shareConfig').then(res => {
				const {
					is_vip
				} = res
				console.log(is_vip)
				this.isVip = is_vip
			})
			
			// #ifdef APP-PLUS
			this.is_ios = uni.getStorageSync("is_ios")
			// #endif
		},
		onReachBottom() {
			if (this.list.length === this.total) {
				return;
			}
			this.page++;
			this.getList();
		},
		onNavigationBarButtonTap(e) {
			let {
				index
			} = e;
			if (index === 0) {
				window.location.href = window.location.origin + '/h5/bundle/pages/share/share'
			}
		},
		methods: {
			init() {
				
				// 获取详情
				var platformName = uni.getStorageSync('name')?uni.getStorageSync('name'):'';
				this.$http.post('api/index/serviceDetails', {
					id: this.id
				}).then(res => {
					console.log(res)
					//this.tipsValue = '随机随到 最快30分钟上门';
					this.tipsValue = '24小时随叫随到按摩 · 就选' + platformName;
					let {
						service,
						vip,
						spec,
						comment,
						config
					} = res;
					this.config = config
					console.log(this.config)
					this.list3 = service.banner;
					this.content = service.introduce;
					this.notice =service.notice;
					this.praise = service.praise;
					this.comment_count = service.comment_count;
					for (let i in vip) {
						this[i] = vip[i];
					}
					this.productlList = spec;
					this.comment = comment;
					this.getList();
					this.getCoupon();
					this.loading = false;

				});
			},
			// 获取评论列表
			getList() {
				this.$http.post('api/index/comment', {
					id: this.id,
					type: this.comment[this.comment_index].id,
					page: this.page,
				}).then(res => {
					let {
						list,
						total
					} = res;
					this.list.push(...list);
					this.total = Number(total);
				});
			},
			// 获取优惠券
			getCoupon() {
				this.$http.post('api/index/coupon', {
					id: this.id
				}).then(res => {
					this.coupon = res;
				})
			},
			changeComment(index) {
				this.comment_index = index;
				this.page = 1;
				this.total = null;
				this.list = [];
				this.getList();
			},
			load() {
				this.$refs.uReadMore.init()
			},
			open(name) {
				console.log('open', name);
			},
			close(name) {
				console.log('close', name);
			},
			onPullDownRefresh() {
				let _self = this
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新
					_self.page = 1;
					_self.total = null;
					_self.list = [];
					_self.init();
				}, 1000);
			},
			onClickItem(e) {
				if (this.isActive !== e) {
					this.isActive = e
				}
			},
			onClickTab(e) {
				console.log(this.config)
				if (this.isTabActive !== e) {
					this.isTabActive = e
				}
			},
			onCollection() {
				this.$http.post('api/collect/collect', {
					technician_id: this.id
				}).then(res => {
					this.name === 'heart-fill' ? this.name = 'heart' : this.name = 'heart-fill';
					if (this.name === 'heart-fill') {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						})
					}
				})
			},
			onConfirm() {
				let isActive = this.productlList[this.isActive];
				
				uni.setStorageSync('order_info', {
					service_id: this.id,
					spec_id: isActive.id,
					coupon_id: 0
				})
				if (this.type == 1) {
					let order_info = uni.getStorageSync('order_info');
					order_info.technician_id = this.technician_id
					uni.setStorageSync('order_info', order_info);
					uni.navigateTo({
						url: `/pages/confirm_order/confirm_order?id=${this.technician_id}`
					})
				} else {
					
					uni.navigateTo({
						url: `/pages/selectTechnician/selectTechnician?id=${this.id }&name=${this.productlList[this.isActive].name}`
						//url: `/pages/selectTechnician/select?name=${this.productlList[this.isActive].name}`
					});
				}
			},
			showCoupon() {
				this.$refs.coupon.open();
			},
			toPath(url) {
				uni.navigateTo({
					url,
				})
			},
			yulan(index, urls) {
						uni.previewImage({
							current: index,
							urls: urls
						});
					}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 66rpx;
		background-color: #f8f8f8;
		
		.content{
			.intro{
				white-space:pre-wrap;
				line-height: 23px;
				font-size: 12px;
			}
		}

		.section_1 {
			padding: 88rpx 0 24rpx;
			color: rgb(255, 255, 255);
			font-size: 36rpx;
			font-weight: 500;
			line-height: 50rpx;
			white-space: nowrap;
			background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844674346731028.png');
			background-position: 0px 0px;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.section_2 {
				padding: 20rpx 32rpx 18rpx;
				background-color: rgba(0, 0, 0, 0.24);
			}

			.image_3 {
				margin-top: 348rpx;
				align-self: center;
				width: 104rpx;
				height: 12rpx;
			}
		}

		.section_3 {
			padding: 24rpx 0 24rpx 24rpx;
			background-color: rgb(255, 255, 255);

			.section_4 {
				margin-right: 32rpx;
				padding: 10rpx 26rpx 14rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(248, 248, 248);
				border-radius: 24rpx;

				.image_4 {
					margin-top: 4rpx;
					width: 112rpx;
					height: 36rpx;
				}

				.text_1 {
					margin-left: 26rpx;
				}
			}

			.horiz-list {
				padding: 24rpx 0 0;

				.horiz-list-item {
					padding: 22rpx 18rpx 26rpx 22rpx;
					background-color: #F8F8F8;
					border-radius: 24rpx;
					height: 152rpx;
					margin: 0 8rpx;

					&.active {
						background-color: #fff;
						border: solid 2rpx #38987c;
					}

					.text_2 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.group {
						margin-top: 4rpx;

						.text_3 {
							color: rgb(243, 151, 53);
							font-size: 44rpx;
							line-height: 52rpx;
							white-space: nowrap;
							font-family: Price-Bold;
						}

						.text_4 {
							margin: 16rpx 4rpx 0;
							color: rgb(153, 153, 153);
							font-size: 24rpx;
							font-weight: 500;
							line-height: 34rpx;
							white-space: nowrap;
						}
					}
				}

				.horiz-list-item_1 {
					margin-left: 24rpx;
					padding: 24rpx 24rpx 28rpx;
					background-color: rgb(248, 248, 248);
					border-radius: 24rpx;
					height: 152rpx;

					.text_5 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.group_1 {
						margin-top: 4rpx;

						.text_6 {
							color: rgb(243, 151, 53);
							font-size: 44rpx;
							line-height: 52rpx;
							white-space: nowrap;
						}

						.text_7 {
							margin-left: 4rpx;
							margin-top: 16rpx;
							color: rgb(153, 153, 153);
							font-size: 24rpx;
							font-weight: 500;
							line-height: 34rpx;
							white-space: nowrap;
						}
					}
				}

				.horiz-list-item_2 {
					margin-left: 24rpx;
					padding: 24rpx 0 28rpx;
					background-color: rgb(248, 248, 248);
					border-radius: 24rpx 0 0 24rpx;
					width: 160rpx;
					height: 152rpx;

					.text_8 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.text_9 {
						margin-top: 4rpx;
						color: rgb(243, 151, 53);
						font-size: 44rpx;
						line-height: 52rpx;
						white-space: nowrap;
					}
				}
			}

			.section_5 {
				margin-right: 32rpx;
				padding: 26rpx 24rpx;
				background-image: linear-gradient(97.2deg,
						rgb(81, 81, 81) 0%,
						rgb(81, 81, 81) -15.28%,
						rgb(36, 36, 36) 114.1%,
						rgb(36, 36, 36) 100%);
				border-radius: 24rpx;

				.group_2 {
					color: rgb(226, 189, 128);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;

					.text_10 {
						margin: 4rpx 0 4rpx 16rpx;
					}
				}

				.text-wrapper {
					padding: 6rpx 0 2rpx;
					color: rgb(38, 38, 38);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					background-image: linear-gradient(125.9deg,
							rgb(255, 218, 157) 0%,
							rgb(255, 218, 157) -7.15%,
							rgb(231, 191, 124) 104.11%,
							rgb(231, 191, 124) 100%);
					border-radius: 24rpx;
					width: 136rpx;
					height: 48rpx;
				}
			}
		}

		.section_6 {
			margin-top: 26rpx;
			padding: 20rpx 32rpx;
			background-color: rgb(255, 255, 255);

			.text_12 {
				margin: 4rpx 0;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.group_3 {
				margin: 4rpx 0;
				color: rgb(80, 80, 80);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.text_13 {
					margin-left: 8rpx;
				}

				.image_8 {
					margin: 6rpx 0 6rpx 30rpx;
					width: 24rpx;
					height: 28rpx;
				}

				.text_14 {
					margin-left: 12rpx;
				}
			}
		}

		.section_7 {
			padding: 22rpx 32rpx;
			background-color: rgb(255, 255, 255);

			.image_10 {
				margin-right: 8rpx;
				align-self: center;
				width: 32rpx;
				height: 8rpx;
			}

			.text_15 {
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.group_5 {
				margin-left: 20rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.left-text-wrapper {
					margin-right: 10rpx;
					padding: 6rpx 10rpx 4rpx;
					background-color: rgba(24, 181, 103, 0.12);
					   color:#38987c;
					border-radius: 8rpx;
					// width: 144rpx;
					height: 44rpx;
				}

				.view_1 {
					margin-left: 16rpx;
				}
			}
		}

		.section_8 {
			margin-top: 24rpx;
			padding: 24rpx 32rpx 60rpx;
			background-color: rgb(255, 255, 255);

			.image_11 {
				margin-left: 44rpx;
				margin-bottom: 10rpx;
				width: 42rpx;
				height: 20rpx;
			}

			.text_20 {
				margin-top: 24rpx;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.text_21 {
				margin-right: 14rpx;
				margin-top: 24rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
			}

			.text_19 {
				margin-left: 40rpx;
				margin-top: 4rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				&.active {
					color: rgb(0, 0, 0);
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					white-space: nowrap;
				}
			}
		}

		.section_9 {
			padding: 12rpx 0;
			color: rgb(153, 153, 153);
			font-size: 28rpx;
			line-height: 40rpx;
			white-space: nowrap;
			background-color: rgb(255, 255, 255);

			.image_12 {
				margin-left: 14rpx;
				align-self: center;
				width: 20rpx;
				height: 12rpx;
			}
		}

		.section_10 {
			margin-top: 24rpx;
			padding: 28rpx 32rpx 24rpx;
			background-color: rgb(255, 255, 255);

			.group_8 {
				margin-bottom: 4rpx;
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.text_23 {
				color: rgb(0, 0, 0);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
			}

			.text_24 {
				color: rgb(102, 102, 102);
				font-size: 32rpx;
				line-height: 44rpx;
				white-space: nowrap;
			}
		}

		.section_11 {
			padding: 24rpx 32rpx;
			background-color: rgb(255, 255, 255);

			.group_9 {
				color: rgb(24, 181, 103);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				display: flex;
				flex-flow: wrap;
				.text-wrapper_1 {
					padding: 8rpx 4rpx;
					background-color: rgba(24, 181, 103, 0.12);
					border-radius: 16rpx;
					width: 160rpx;
					height: 56rpx;
					margin-right: 20rpx;
					
				}

				.select {
					padding: 8rpx 20rpx;
					background-color: rgba(24, 181, 103, 0.12);
					border-radius: 16rpx;
					height: 56rpx;
					margin-right: 20rpx;
					margin-top: 15rpx;
				}

				.no-select {
					padding: 8rpx 20rpx;
					background-color: rgb(248, 248, 248);
					border-radius: 16rpx;
					height: 56rpx;
					margin-right: 20rpx;
					margin-top: 15rpx;
					color: rgb(153, 153, 153);
				}

				.view_3 {
					margin-left: 24rpx;
				}

				.text-wrapper_2 {
					margin-left: 24rpx;
					padding: 8rpx 0;
					background-color: rgba(24, 181, 103, 0.12);
					border-radius: 16rpx;
					width: 176rpx;
					height: 56rpx;
				}

				.text-wrapper_3 {
					margin-left: 24rpx;
					padding: 8rpx 0;
					background-color: rgba(24, 181, 103, 0.12);
					border-radius: 16rpx;
					width: 118rpx;
					height: 56rpx;
				}
			}

			.group_10 {
				margin-top: 24rpx;
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.text-wrapper_4 {
					padding: 8rpx 0;
					background-color: rgb(248, 248, 248);
					border-radius: 16rpx;
					width: 216rpx;
					height: 56rpx;
				}

				.text-wrapper_5 {
					margin-left: 24rpx;
					padding: 8rpx 0;
					background-color: rgb(248, 248, 248);
					border-radius: 16rpx;
					width: 176rpx;
					height: 56rpx;
				}
			}

			.group_no {
				padding-bottom: 144rpx;
			}
		}

		.section_12 {
			padding: 38rpx 32rpx 24rpx;
			background-color: rgb(255, 255, 255);

			.group_11 {
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;

				.image_14 {
					border-radius: 50%;
					width: 72rpx;
					height: 72rpx;
				}

				.group_12 {
					margin-left: 16rpx;

					.image_15 {
						margin-top: 8rpx;
						width: 136rpx;
						height: 24rpx;
					}

					.star {
						display: flex;
					}
				}
			}

			.text_33 {
				margin-right: 14rpx;
				margin-top: 24rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
			}

			.group_13 {
				margin-top: 23rpx;
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.text_34 {
					margin-top: 15rpx;
				}

				.equal-division-item {
					
					border-radius: 12rpx;
					width: 212rpx;
					height: 214rpx;
					margin-right: 20rpx;
				}

				.image_17 {
					margin-left: 26rpx;
				}

				.image_18 {
					margin-left: 24rpx;
				}
			}
		}

		.group_14 {
			padding: 2rpx 0 68rpx;
			position: fixed;
			bottom: 0;
			width: 100vw;

			.section_13 {
				background-color: rgb(255, 255, 255);
				height: 84rpx;
			}

			.section_14 {
				padding: 16rpx 32rpx;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px -8rpx 16rpx 0px rgba(0, 0, 0, 0.06);
				position: absolute;
				left: 0;
				right: 0;
				bottom: 2rpx;

				.group_15 {
					margin-bottom: 4rpx;
					color: rgb(80, 80, 80);
					font-size: 20rpx;
					line-height: 28rpx;
					white-space: nowrap;

					.image_19 {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.group_16 {
					margin-left: 40rpx;
					flex: 1 1 auto;
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					line-height: 44rpx;
					white-space: nowrap;

					.button {
						padding: 22rpx 0;
						background-color: #38987c;
						border-radius: 42rpx;
					}
				}
			}
		}

		.image_6 {
			margin: 4rpx 0;
			width: 32rpx;
			height: 32rpx;
		}

		.image {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>
